import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pornhub_app/assets/assets.dart';
import 'package:pornhub_app/components/text_view.dart';
import 'package:pornhub_app/model/engagement/engagement_hot_tag_model.dart';
import 'package:pornhub_app/routes/routes.dart';
import 'package:pornhub_app/utils/color.dart';
import 'package:pornhub_app/views/engagement/controllers/engagement_search_page_controller.dart';

class EngagementSearchPage extends StatefulWidget {
  const EngagementSearchPage({super.key});

  @override
  State<StatefulWidget> createState() => _EngagementSearchPageState();
}

class _EngagementSearchPageState extends State<EngagementSearchPage> {
  final controller = Get.find<EngagementSearchPageController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildSearchBar(),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 20.h),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildSectionTitle('热搜服务'),
            SizedBox(height: 10.h),
            _buildTagViews(),
          ],
        ),
      ),
    );
  }

  _buildSearchBar() {
    return AppBar(
      shadowColor: const Color.fromRGBO(0, 0, 0, 0),
      surfaceTintColor: Colors.white,
      automaticallyImplyLeading: true,
      titleSpacing: 0,
      title: Flex(
        direction: Axis.horizontal,
        children: [
          Expanded(
            child: Container(
              width: double.infinity,
              height: 38.w,
              clipBehavior: Clip.hardEdge,
              alignment: Alignment.center,
              margin: EdgeInsets.only(right: 20.w),
              padding: EdgeInsets.symmetric(horizontal: 15.w),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(16.w),
                color: COLOR.color_F5F5F5,
              ),
              child: Flex(
                direction: Axis.horizontal,
                children: [
                  Expanded(
                    child: TextField(
                      style: TextStyle(color: Colors.black, fontSize: 13.w),
                      controller: controller.searchTextController,
                      onSubmitted: (value) {},
                      decoration: InputDecoration(
                        isCollapsed: true,
                        hintText: "搜索你想要的服务（例如：口交）",
                        hintStyle: TextStyle(
                            color: COLOR.color_999999, fontSize: 13.w),
                        border: InputBorder.none,
                      ),
                    ),
                  ),
                  Image.asset(
                    Assets.iconSearch,
                    height: 18.w,
                    width: 18.w,
                  ),
                ],
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              if (controller.searchTextController.text.isEmpty) {
                return;
              }
              Get.toNamed(
                Routes.engagement_search_result,
                arguments: {
                  "searchType": "Keywords",
                  "searchArguments": controller.searchTextController.text,
                },
              );
            },
            child: Container(
              margin: EdgeInsets.only(right: 14.w),
              child: TextView(
                text: '搜索',
                color: COLOR.color_333333,
                fontSize: 16.w,
              ),
            ),
          ),
        ],
      ),
      backgroundColor: COLOR.hexColor('#ffffff'),
    );
  }

  Widget _buildSectionTitle(String title) {
    return TextView(
      text: title,
      fontSize: 16.w,
      color: COLOR.color_333333,
      fontWeight: FontWeight.w600,
      textAlign: TextAlign.start,
    );
  }

  Widget _buildTagViews() {
    return SizedBox(
      width: double.infinity,
      child: Obx(
        () => Wrap(
          spacing: 6.w,
          runSpacing: 13.h,
          children: controller.hotTags.value.map((hotTag) {
            return _buildTagItem(hotTag);
          }).toList(),
        ),
      ),
    );
  }

  Widget _buildTagItem(Data model) {
    return GestureDetector(
      onTap: () {
        Get.toNamed(
          Routes.engagement_search_result,
          arguments: {
            "searchType": "hotTag",
            "searchArguments": model.tagName,
            "searchHotTagId": model.tagId,
          },
        );
      },
      child: Container(
        height: 29.h,
        padding: EdgeInsets.symmetric(horizontal: 15.w),
        decoration: BoxDecoration(
          color: COLOR.randomColor(),
          borderRadius: BorderRadius.circular(4.w),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            TextView(
              text: model.tagName ?? "",
              fontSize: 12.w,
              color: Colors.white,
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}
